<script setup>
import { ref } from 'vue'

const info = ref({
    period: '23.07.02 至 23.07.11',
    operators: '曹辉、王强刚',
    status: '1'
})

const value = ref('')
</script>

<template>
    <div class="com-side-card card">
        <div class="com-card-head">
            <h1>产线巡检情况</h1>
            <div class="picker">
                <el-date-picker
                    v-model="value"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    class="date"
                />
            </div>
        </div>
        <div class="com-block-content block">
            <div class="title">
                <strong>数字化产线车间-运维岗</strong>
            </div>
            <div class="content">
                <div class="item">
                    <span class="lable">起止时间</span>
                    <span class="cnt">{{ info.period }}</span>
                </div>
                <div class="item">
                    <span class="lable">巡检人员</span>
                    <span class="cnt">{{ info.operators }}</span>
                </div>
                <div class="item">
                    <span class="lable">巡检状态</span>
                    <span>
                        <em style="color: #71cd4c" v-if="info.status == '1'">已巡检</em>
                        <em style="color: #abb691" v-if="info.status == '2'">未开始</em>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.card {
    height: 181px;
    .picker {
        width: 200px;
        height: 23px;
        display: flex;
        .date {
            background-color: red;
        }
    }
    .block {
        flex-direction: column;
        gap: 13px;
        padding: 10px;
        .title {
            width: 170px;
            height: 30px;
            background-color: #ffffff36;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;

            strong {
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
                text-align: center;
            }
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            gap: 7px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;

                em,
                span {
                    font-size: 13.5px;
                }
            }
        }
    }
}
</style>
